---
title: SectionRenderer 框渲染器
icon: Box
relatedFile: app/src/core/render/canvas2d/entityRenderer/section/SectionRenderer.tsx
---

`SectionRenderer` 服务用于在画布上渲染 `Section` 对象，处理它们的视觉表现，包括折叠状态、非折叠状态、背景颜色以及不同样式的标题渲染。它与 `Project` 实例中的其他渲染器（如 `shapeRenderer`、`textRenderer`）协同工作，以确保 `Section` 对象能够正确且美观地呈现在用户界面上。

## 内部渲染逻辑

### `renderCollapsed(section: Section)`

当 `Section` 处于折叠状态时，此方法负责绘制其视觉表现。它会绘制一个带有圆角的矩形作为折叠状态的边界，并根据 `Section` 的颜色和当前舞台样式混合颜色。此外，它还会绘制一个外框，并在非编辑标题状态下渲染 `Section` 的文本标题。

### `renderNoCollapse(section: Section)`

当 `Section` 处于非折叠状态时，此方法负责绘制其视觉表现。它主要绘制 `Section` 的边框，边框宽度会根据摄像机缩放比例和 `entityRenderer` 的设置进行调整。在摄像机缩放比例大于特定阈值且非编辑标题状态下，它还会正常显示 `Section` 的文本标题。

### `getFontSizeBySectionSize(section: Section): Vector`

此辅助方法用于根据 `Section` 的尺寸计算适合其内部文本的字体大小。它通过测量文本的宽度和高度，并与 `Section` 的宽高比进行比较，以确定最佳的字体高度，从而使文本能够适应 `Section` 的空间。

## API

### `renderBackgroundColor(section: Section): void`

此方法用于渲染 `Section` 的背景颜色。它会克隆 `Section` 的颜色并将其透明度限制在 0.5，然后绘制一个填充了此半透明颜色的圆角矩形，作为 `Section` 的背景。

### `renderBigCoveredTitle(section: Section): void`

此方法用于渲染覆盖了整个 `Section` 的大标题。当摄像机缩放比例小于 `Section.bigTitleCameraScale` 时，它会绘制一个半透明的矩形作为背景，并以巨大的字体在 `Section` 的中心渲染其文本标题，以提供一种“缩放过小显示巨大化文字”的视觉效果。

### `renderTopTitle(section: Section): void`

此方法用于以类似 Figma 白板的方式渲染 `Section` 的顶部标题。当摄像机缩放比例小于 `Section.bigTitleCameraScale` 时，它会在 `Section` 的左上角上方绘制一个带有背景色和边框的矩形，并在其中渲染 `Section` 的文本标题。

### `render(section: Section): void`

这是 `SectionRenderer` 服务的主要渲染入口点。它根据 `Section` 的状态（是否被折叠隐藏、是否折叠）调用相应的内部渲染方法 (`renderCollapsed` 或 `renderNoCollapse`)。此外，如果 `Section` 被选中，它还会渲染其碰撞框。在调试模式下，它还会绘制 `Section` 及其子元素之间的父子关系曲线。最后，它会调用 `entityRenderer` 来渲染 `Section` 的详细信息。
